<template>
  <div class="header">
    <div class="header-left">
      <img class="header-left-img" src="../../assets/logoOne.png" alt="">
    </div>
    <div class="header-right">
      <div class="header-right-info">
        <info @click="lookInfo" class="info"/>
      </div>
      <el-dropdown class="header-right-img">
        <el-image class="avatar" :src="user.avatarUrl"><arrow-down /></el-image>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item @click="backIndex">返回首页</el-dropdown-item> -->
            <el-dropdown-item @click="backLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import info from '../../assets/info.vue'
import { reactive,ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'

const router = useRouter()
const user=ref({
  userName:'',
  avatarUrl:'https://www.toopic.cn/public/uploads/small/169139790585716913979057.jpg'
})
const backIndex=()=>{
  console.log("返回首页")
  router.push('/te-home')
}
const backLogin=()=>{
  console.log("退出首页")
  router.push('/')
}
const onLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}
const lookInfo=()=>{
  console.log("查看信息")
}
</script>

<style lang="less" scoped>

.header {
  // position: absolute;
  height: 100%;
  width: 100%;
  // height: 60px;
  // border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 0.5rem;
  background-color: #98b62b;
}
.header-left{
    display: flex;
    align-items: center;
    color: #fff;
    height: 90%;
    width: 10%;
    background-color: aqua;
    margin-left: 2%;
  }
.header-left-img {
  height: 100%;
  width: 100%;
}
.header-right{
  float: right;
  // margin-right: 15px;
  height: 100%;
  width: 15%;
  // background-color: #881e1e;

}
.header-right-info{
  height: 100%;
  width: 38%;
  float: left;
  margin-right: 12%;
  // background-color: antiquewhite;
}
.info{
  height: 60%;
  width: 60%;
  margin: 20% 50%;
  // background-color:red;
}
.info:active{
  height: 76%;
  width: 76%;
  // width: 30px;
  }
.header-right-img{
  float: left;
  height: 100%;
  width: 33%;
  // background-color: aqua;
}
.avatar{
  border-radius: 50%;
  height: 85%;
  width: 85%;
  margin: 7% 0;
  // width: 90%;

}
</style>